<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
        <style>
            #div1 button{width: 100px; height: 30px; background-color: gray; font-size: 16px; color: white}
            #div1 div{width: 350px; height: 350px; background-color: gray; border: 1px solid black; display: none}
            #div1 .active{background-color: orange; color: blue}
        </style>
        <title>Document</title>
        <script>
            window.onload = function(){
                var oDiv = document.getElementById("div1");
                var aBtns = oDiv.getElementsByTagName("button");
                var aDivs = oDiv.getElementsByTagName("div");

                //通过循环添加点击事件
                for(var i = 0; i < aBtns.length; i++){
                    //添加自定义属性，记录当前按钮的下标
                    aBtns[i].index = i;
                    aBtns[i].onclick = function(){
                       //清除按钮所有样式，将div隐藏
                       for(var j = 0; j < aBtns.length; j++){
                           aBtns[j].className = '';
                           aDivs[j].style.display = 'none';
                       }

                       //将当前点击的按钮变成被选中的
                       this.className = 'active';
                       aDivs[this.index].style.display = 'block';
                    }
                }
            }
        </script>
    </head>
    <body>
        <div id = 'div1'>
            <button class = 'active'>HTML5</button>
            <button>JavaScript</button>
            <button>JQuery</button>
            <div style = 'display: block'>万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改（这是一项推荐标准、外语原文：W3C Recommendation、见本处参考资料原文内容：）。20...</div>
            <div>avaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早...</div>
            <div>jQuery 教程 jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 jQuery 很容易学习。 本章节的每一篇都包含了在线实例 通过本站的在线编辑器...</div>
        </div>
    </body>
</html>